import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import ProTable from '@ant-design/pro-table';
import { useState, useRef } from 'react';
import { Button, Divider, message, } from 'antd';
import Confirm from '@/components/common/Confirm';
import { list, remove } from '@/services/system/job';
import styles from './index.less';
import { EditOutlined, DeleteOutlined, SafetyOutlined } from '@ant-design/icons';
import {SystemDeptTree} from '@/components/system/dept'
import SystemJobForm from './components/form';
import SystemJobAuth from './components/auth';

const SystemJob = () => {
  const actionRef = useRef();

  const [dept, handleDept] = useState({});
  const [formVisible, handleFormVisible] = useState(false);
  const [formValues, handleFormValues] = useState({});
  const [authVisible, handleAuthVisible] = useState(false);

  const handleSelectDept = (node) => {
    handleDept(node);
    if (actionRef.current) actionRef.current.reload();
  }

  const handleRaise = () => {
    handleFormValues({sort: 1, deptId: dept.id, });
    handleFormVisible(true);
  }

  const handleModify = (record) => {
    handleFormValues(record);
    handleFormVisible(true);
  }

  const handleDelete = (record) => {
    Confirm.delete({
      content: `<p>名称为 <span style="color: #f60"> ${record.name} </span> 的岗位将被删除</p><p>是否继续？</p>`,
      confirm: () => {
        remove(record.id).then((data) => {
          if (data.success) {
            if (actionRef.current) actionRef.current.reset();
            message.success('删除成功!');
          } else {
            message.error('删除失败!');
          }
        });
      },
    });
  };

  const handleAuth = (record) => {
    handleFormValues(record);
    handleAuthVisible(true);
  }

  const columns = [
    { title: '岗位名称', dataIndex: 'name' },
    { title: '岗位编码', dataIndex: 'code' },
    { title: '排序值', dataIndex: 'sort' },
    { title: '所属职务', dataIndex: 'dutyName' },
    { title: '数据来源', dataIndex: 'sources' },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 300,
      render: (_, record) => {
        return (
          <>
            <a onClick={() => { handleModify(record); }}> <EditOutlined/> 修改 </a>
            
            <Divider type="vertical" />
            <a onClick={() => { handleDelete(record) }}> <DeleteOutlined/> 删除 </a>
            
            <Divider type="vertical" />
            <a onClick={() => { handleAuth(record) }}> <SafetyOutlined /> 授权 </a>
          </>
        );
      },
    },
  ];

  return (
    <PageContainer>
      
      <ProTable
        headerTitle={`${dept && dept.name ? dept.name : ''} 岗位信息查询列表`}
        rowKey="id"
        actionRef={actionRef}
        search={false}
        manualRequest={true}
        toolBarRender={() => [
          <Button type="primary" onClick={() => { handleRaise(); }}> 新建 </Button>,
        ]}
        request={ (params) => {
          return list(dept.id);
        }}
        columns={columns}
        pagination={false}
        tableRender={(_, dom) => (
          <ProCard split="vertical">
            <ProCard colSpan={4} title="机构部门列表">
              <SystemDeptTree onSelect={handleSelectDept} />
            </ProCard>
            <ProCard colSpan={20} headerBordered className={styles.jobListContainer}>
              {dept.id? dom : null}
            </ProCard>
          </ProCard>
        )}
      />

      {
        formVisible && 
        <SystemJobForm 
          onSubmit={() => {
            if (actionRef.current) actionRef.current.reset();
            handleFormVisible(false);
          }}
          onCancel={() => {
            handleFormVisible(false);
          }}
          formVisible={formVisible}
          values={formValues}
        />
      }

{
        authVisible &&
        <SystemJobAuth 
          visible={authVisible}
          values={formValues}
          onClose={() => {
            handleAuthVisible(false);
          }}
        />
      }
    </PageContainer>
  );
};

export default SystemJob;
